import React from 'react';
import './index.css';

const STATUS = {
  odd: 1,
  even: 2,
  normal: 0,
};

const btns = [
  { label: '基数', status: STATUS.odd },
  { label: '偶数', status: STATUS.even },
  { label: '正常', status: STATUS.normal },
];

class NumberList extends React.Component {
  state = {
    status: STATUS.normal, // 正常 1基数 2偶数
  };

  onStatusChange = status => {
    this.setState({ status });
  };

  renderBtns = () => {
    const { status } = this.state;
    return btns.map(btn => {
      const { status: btnStatus, label } = btn;
      return (
        <button
          key={btnStatus}
          style={{ color: status === btnStatus ? 'red' : '' }}
          onClick={() => this.onStatusChange(btnStatus)}
        >
          {label}
        </button>
      );
    });
  };

  renderList = () => {
    const { status } = this.state;
    const list = [2, 4, 6, 8, 10];
    return list.map((item, index) => {
      let isActive = false;
      if (
        (status === STATUS.odd && !!(index % 2)) ||
        (status === STATUS.even && !(index % 2))
      ) {
        isActive = true;
      }
      const cls = `line ${isActive ? 'line--active' : ''}`;
      return (
        <p key={item} className={cls}>
          {item}
        </p>
      );
    });
  };

  render() {
    return (
      <>
        {this.renderBtns()}
        {this.renderList()}
      </>
    );
  }
}

export default NumberList;
